<template>
    <!-- 触发抽屉显示的按钮 -->
    <el-button type="primary" @click="drawer = true">选择角色</el-button>
    <!-- 商品选择抽屉 -->
    <el-drawer v-model="drawer" title="角色列表" size="60%">
        <!-- 查询表单 -->
        <el-form :inline="true" :model="formData" class="demo-form-inline">
          <el-form-item>
              <!-- 关键字输入框 -->
              <el-input v-model="formData.name" placeholder="请输入关键字" clearable />
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
      </el-form>

      <el-table :data="tableData" style="width: 100%" ref="tableRef">
        <el-table-column type="selection" width="55" />
      <el-table-column fixed prop="id" label="id" width="100" />
      <el-table-column prop="name" label="职位" width="200" />
      <el-table-column prop="description" label="描述" width="200" />
      
    </el-table>
      <!-- 分页组件 -->
      <el-pagination background layout="total, prev, pager, next" :total="pageData.total" :page-size="pageData.pageSize"
      @current-change="pageChange">
      </el-pagination>
      <!-- 选择选中商品按钮 -->
      <el-button type="danger" @click="onSelect">修改角色</el-button>
    </el-drawer>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, defineModel } from 'vue'
import { rolesApi } from '@/api'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 表格数据
const tableData = ref([])
// 控制抽屉显示隐藏
const drawer = ref(false)
// 绑定模型值
const modelValue = defineModel()
// 表格引用
const tableRef = ref()
// 查询表单数据
const formData = reactive({
  name: "",
  categoryId: 0,
  status: 0
})
// 分页数据
const pageData = reactive({
  total: 0,
  pageSize: 5,
  pageNum: 1
})

const callProductApi = () => {
  let params = {
    pageNum: pageData.pageNum,
    pageSize: pageData.pageSize,
    name: formData.name == "" ? undefined : formData.name
  }

  rolesApi.select.call(params).then(res => {
    pageData.total = res.count
    tableData.value = res.items
  })
}

// 分页改变时触发
const pageChange = (pageNum: number) => {
  pageData.pageNum = pageNum
  callProductApi()
}


// 组件挂载后调用
onMounted(() => {
  callProductApi()
})

// 提交查询
const onSubmit = () => {
  callProductApi()
}

// 选择选中商品
const onSelect = () => {
  let selectedRows = tableRef.value.getSelectionRows()
  modelValue.value = selectedRows
  console.log(selectedRows)
  drawer.value = false
}
</script>